#index {
  color: #d3d6dd;
  // width: 1920px;
  // height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;
  word-wrap: break-word;

  .bg {
    width: 100vw;
    height: 100vh;
    padding: 0.5vh 0.5vw;
    // 原来的背景图片
    // background-image: url("../assets/pageBg.png");
    background-image: url("../assets/bg.jpg");
    background-size: cover;
    background-position: center center;
  }

  .host-body {
    display: grid;
    // 实际内容撑开整个屏幕
    // min-height: 99vh;
    // grid-template-rows: 1.5fr 1fr 32fr 0.5fr;
    .dv-dec-10,
    .dv-dec-10-s {
      width: 33.3%;
      height: 5px;
    }
    .dv-dec-10-s {
      transform: rotateY(180deg);
    }
    .dv-dec-8 {
      width: 200px;
      height: 50px;
    }
    .title {
      height: 6vh;
      position: relative;
      width: 50vw;
      text-align: center;
      background-size: cover;
      background-repeat: no-repeat;

      .title-text {
        padding-top: 1.5vh;
        // height: 3vh;
        color: yellow;
        font-size: 2.6vw;
        font-weight: 800;
        position: absolute;
        // bottom: 0;
        left: 50%;
        transform: translate(-50%);
      }
    }

    .dv-dec-6 {
      position: absolute;
      left: 50%;
      width: 18vw;
      height: 1.8vh;
      transform: translate(-50%);
    }

    // 第二行
    .aside-width {
      width: 40%;
    }
    .react-r-s,
    .react-l-s {
      background-color: #0f1325;
    }

    // 平行四边形
    .react-right {
      &.react-l-s {
        text-align: right;
        width: 500px;
      }
      font-size: 18px;
      width: 300px;
      line-height: 50px;
      text-align: center;
      transform: skewX(-45deg);

      .react-after {
        position: absolute;
        right: -25px;
        top: 0;
        height: 50px;
        width: 50px;
        background-color: #0f1325;
        transform: skewX(45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(45deg);
      }
    }
    // 内容展示窗口
    .body-box {
      // margin-top: 16px;
      display: grid;
      height: 90vh;
      // flex-direction: column;
      grid-template-columns: 3fr 3fr 6fr 3fr 3fr;
      grid-template-rows: repeat(4, 1fr);
      grid-gap: 0.2vh;

      //左上区域的布局
      .leftUp {
        display: grid;
        grid-column-start: 1;
        grid-column-end: span 1;
        grid-row-start: 1;
        grid-row-end: span 2;
      }
      .leftUp1 {
        display: grid;
        grid-column-start: 2;
        grid-column-end: span 1;
        grid-row-start: 1;
        grid-row-end: span 2;
      }
      // 底部数据
      .leftDown {
        display: grid;
        grid-column-start: 1;
        grid-column-end: span 1;
        grid-row-start: 3;
        grid-row-end: span 2;
      }
      .leftDown1 {
        display: grid;
        grid-column-start: 2;
        grid-column-end: span 1;
        grid-row-start: 3;
        grid-row-end: span 2;
      }

      .centerUp {
        grid-column-start: 3;
        grid-column-end: span 1;
        grid-row-start: 1;
        grid-row-end: span 1;
      }

      .centerDown {
        grid-column-start: 3;
        grid-column-end: span 1;
        grid-row-start: 2;
        grid-row-end: span 4;
      }
      .rightUp1 {
        display: flex;
        grid-column-start: 4;
        grid-column-end: span 1;
        grid-row-start: 1;
        grid-row-end: span 2;
      }

      .rightUp2 {
        display: flex;
        grid-column-start: 5;
        grid-column-end: span 1;
        grid-row-start: 1;
        grid-row-end: span 2;
      }

      .rightDown1 {
        display: flex;
        grid-column-start: 4;
        grid-column-end: span 2;
        grid-row-start: 3;
        grid-row-end: span 1;
      }
      .rightDown {
        display: flex;
        grid-column-start: 4;
        grid-column-end: span 2;
        grid-row-start: 4;
        grid-row-end: span 1;
      }

      .bototm-box {
        margin-top: 10px;
        display: grid;
        grid-template-columns: 5fr 5fr 3fr 2fr;
      }
    }
  }
}
